<template>
    <div class="myFooter">
        <ul id="footAllText">
            <li v-for="text in footertext" :key="text.title">
                <router-link :to="text.to" active-class="footActive">
                    <template v-if="text.title == '消息'">
                        <template v-if="unreadNum == 0 || unreadNum == null">
                            <i :class="text.piture"></i>
                            <span>{{text.title}}</span>
                        </template>
                        <template v-if="unreadNum != 0 && unreadNum != null">
                            <van-badge dot>
                                <i :class="text.piture"></i>
                                <span>{{text.title}}</span>
                            </van-badge>
                        </template>
                    </template>
                    <template v-if="text.title != '消息'">
                        <i :class="text.piture"></i>
                        <span>{{text.title}}</span>
                    </template>
                </router-link>
            </li> 
        </ul>
    </div>
</template> 

<script>
import { Badge } from 'vant';
export default {
    name:'MyFoot', 
    data(){
        return{
            footertext:[
                {title:"动态",piture:"iconfont icon-fangzi",to:"/dynamic"},
                {title:"广场",piture:"iconfont icon-dongtai",to:"/square"},
                {title:"发布",piture:"iconfont icon-fabu",to:"/release"},
                {title:"消息",piture:"iconfont icon-xiaoxi",to:"/message"},
                {title:"我的",piture:"iconfont icon-shouye",to:"/myself"}
            ],
            unreadNum:null
        }
    },
    mounted(){
        this.unreadNum = sessionStorage.getItem('allUnread')
        //监听浏览器storage的变化
        window.addEventListener('storage', (e) => {
            if(e.key == 'allUnread'){
                console.log(1111)
                this.unreadNum = e.newValue
            }
        });
    },
}
</script> 

<style lang="less" scope>

    .myFooter{
        border-top: solid 1px #bdbdbd;
        background-color: white;
    }
    #footAllText{
        /* font-family: 'Courier New', Courier, monospace; */
        font-size: @fontSmall;
        width: 100%;
        height: auto;
        list-style: none;
        padding-top: 0.1rem;
        display: flex;
        justify-content: space-evenly;
		li{
			font-size: 0.4rem;
			text-align: center;
			a{
				color: #2c3e50;
				display: inline-block;
				i{
					font-size: @fontSize;
					display: flex;
					justify-content: center;
				}
				span{
					font-size: @fontSmall;
				}
		
			}
		}
    }
	

.footActive{
	color: var(--themeColor) !important;
}
</style>